import {createContext, useEffect, useState} from "react";
import StartRating from "./starRating.jsx";
import {FaTrash} from "react-icons/fa";
import colors from "./color-data.json";
import {v4} from "uuid";

function ColorPort({title, color, rating, onRemove = f => f}){

    useEffect(() => {
        console.log("Button")
    }, []);

    return (
        <section>
            <h1>{title}</h1>
            <button onClick={() => onRemove(id)}>
                <FaTrash/>
            </button>

            <div style={{height: 50, backgroundColor: color}} />
            <StartRating selectedStars={rating} />
        </section>
    )
}

function Colors({color = [], onRemoveColor = f => f}){
    if (!color.length){
        return <div>No Colors Listed.(Add a Color)</div>
    }

    return (
        <div>
            {color.map(color => <ColorPort key={v4}{...color} onRemove={onRemoveColor}></ColorPort>)}
        </div>
    )
}

export default function Color(){
    const [color, setColors] = useState(colors);

    return (
        <Colors color={colors} onRemoveColor={id => {
            const newColors = color.filter(color => color.id !== id);
            setColors(newColors);
        }}>
        </Colors>
    )
}

// const colorContext = createContext();
//
// export function ColorProvider({children}){
//     const [colors, setColors] = useState(colors)
//     return (ColorCon)
// }